<!DOCTYPE html>
<html>
<head>
    <title>Canvas绘制笑脸</title>
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="200" height="200"></canvas>

    <script>
        const canvas = document.getElementById('myCanvas');
        const context = canvas.getContext('2d');

        // 绘制黄色圆形
        context.beginPath();
        context.arc(100, 100, 80, 0, 2 * Math.PI);
        context.fillStyle = 'yellow';
        context.fill();
        context.strokeStyle = 'black';
        context.lineWidth = 2;
        context.stroke();

        // 绘制眼睛
        context.beginPath();
        context.arc(70, 80, 15, 0, 2 * Math.PI); // 左眼
        context.arc(130, 80, 15, 0, 2 * Math.PI); // 右眼
        context.fillStyle = 'black';
        context.fill();

        // 绘制嘴巴
        context.beginPath();
        context.arc(100, 120, 50, 0.2 * Math.PI, 0.8 * Math.PI); // 嘴巴弧线
        context.lineWidth = 5;
        context.stroke();

        // 绘制笑脸
        // context.beginPath();
        // context.arc(100, 150, 30, 0, 2 * Math.PI); // 笑脸
        // context.fillStyle = 'yellow';
        // context.fill();
        // context.strokeStyle = 'black';
        // context.stroke();
    </script>
</body>
</html>